<template>
  <div class="commonAnchor">
      <a-menu v-model="current" mode="horizontal" class="sliderAnchor" id="jump">
        <a-menu-item v-for="(item,index) in anchorList" :key="index" @click="jump(item.href)">{{ item.name }}</a-menu-item>
      </a-menu>
  </div>
</template>
<script>
export default{
  name: "commonAnchor",
  props: {
    anchorList: {
      type: Array,
      default: () =>[
        {
          name: "基本信息",
          href: "#basic-message"
        },
        {
          name: "交付物",
          href: "#deliverables" 
        },
        {
          name: "自检人设置",
          href: "#self-checking"
        },
        {
          name: "流程设置",
          href: "#flow-path"
        }
      ]
    }
  },
  data() {
    return {
      current: [0],
    }
  },
  methods: {
    jump(i){
      const returnEle = document.querySelector(i);
      if(!!returnEle) {
        returnEle.scrollIntoView(true);
      }
    }
  }
}
</script>
<style lang="less" scoped>
.commonAnchor{
  // padding-bottom: 20px;
}
</style>